<template>
	<view class=""> 
		
		<!-- <view class="my-tab">
			<view class="my-tab-item " v-for="item in tabList">
				<view class="my-tab-item-title " @click="swiperTAB(item)">
					{{item.title}}
					<view :class="activeTab == item.ids ? 'active' : null">
					</view>
				</view>
			</view>

		</view> -->
		<!-- <swiper @change="swiperChange" class="swiper" :style="{height:swiperHeight + 'rpx'}" :current="activeTab"
		 :indicator-dots="false" :autoplay="false" :interval="2000" :duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="item.ids">
				<view class="item-box">
					<block v-for="items in item.list">
						<view class="list" style="margin: 20rpx 0rpx;">
							<view class="list-left">
								<view class="list-item-Avatars">
									{{items.displayName ? items.displayName.split("")[0] : ''}}
								</view>
								<view class="list-item">
									{{items.displayName}}
								</view>
							</view>
							<button :disabled="items.check" size="mini" style="width:80px" type="primary" @click="doAdd(index,items)">{{items.check ? '已添加' : '添加'}}</button>
						</view>
					</block>
				</view>
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	export default {
		props: ["list","selectList"],
		data() {
			return {
				activeTab: "0",
				tabList: [{
						title: "联系人",
						ids: 0
					},
					{
						title: "好友",
						ids: 1
					}
				],
				swiperList: [{
						ids: 0,
						list: []
					},
					{
						ids: 1,
						list: []
					}
				],
				swiperHeight: "",
				option: {},
			}
		},
		
		onReady() {
		},
		methods: {
			back(){
				this.$emit("selectContactBackOrSucess")
			},
			doAdd(i, item) {
				this.swiperList[i].list.map((ele,index) => {      
					if (ele.id == item.id && !ele.check) {
							ele.check = true;
							this.swiperList[i].list.splice(index,1,ele)
							this.$emit("doAddContact", item)
					}
				})
			},
			swiperChange(val) {
				this.activeTab = val.detail.current;
				this.initHeight(val.detail.current)
			},
			swiperTAB(val) {
				this.activeTab = val.ids;
				this.initHeight(val.ids)
			},
			initHeight(ids) {
				this.swiperHeight = (this.swiperList[ids].list.length + 1) * 75
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-searchbar__text-placeholder{
		color: $today-calender-color;
	}
	.item-box {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	.btn {
		width: 100%;
		position: absolute;
		bottom: 100rpx;
		z-index: 999;
	}

	.scroll-view-content {
		white-space: nowrap; //1、scroll-view元素添加此行代码，意思是规定段落中的文本不进行换行

		.every-scroll-item {
			display: inline-block; //2、滚动区域里的每一个子元素设置为行内块元素
			width: 60rpx;
			height: 60rpx;
			background-color: #ccc;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}

	.every-scroll-item:nth-child(1) {
		margin-left: 20rpx;
	}

	.list-left {

		display: flex;
		align-items: center;
		width: 80%;
		height: 60rpx;
	}

	.list-item-Avatars {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 60rpx;
		background-color: #007AFF;
		color: $today-calender-color;
	}

	.list-item {
		margin-left: 16rpx;
		color: $today-calender-color;
	}

	.list {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 10rpx 0;
		padding: 0px 40rpx;

	}

	.list-item-add {
		width: 16%;
		height: 100%;
		display: flex;
		align-items: center;
		background-color: #626262;
		border-radius: 25rpx;
		color: #FFFFFF;
		justify-content: center;
	}

	.my-tab-item-title {
		width: 90rpx;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		color: $today-calender-color;
	}

	.active {
		width: 100%;
		height: 4rpx;
		background-color: #707070;
		position: absolute;
		bottom: 0;
		transition: all ease-in .3s;
	}

	.my-tab {
		width: 95%;
		height: 75rpx;
		margin: 0 auto;
		background-color: $today-bg-color;
		display: flex;
		align-items: center;

		.my-tab-item {
			display: flex;
			justify-content: center;
			width: 50%;
			height: 100%;
			font-size: 28rpx;
			color: #626262;
		}
	}

	/deep/ .uni-searchbar__box {
		justify-content: flex-start !important;
	}
</style>
